<template>
	<view class="Column">
		<view class="container">
			<ColumnItem v-if="columnList.length" :list="columnList" @accept="acceptColumn" :index="columnIndex" />
			<ColumnItem v-if="classList.length" :list="classList" @accept="acceptClass" :index="classIndex" />
			<ColumnItem v-if="categoryList.length" :list="categoryList" @accept="acceptCategory"
				:index="categoryIndex" />
			<ColumnItem v-if="typeList.length" :list="typeList" @accept="acceptType" :index="typeIndex" />
			<view class="images" v-if="categoryList.length>3 && slideImgTime">
				<image src="@/static/images/slide.gif" class="column-slide"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';

	import {
		apiGetModelCategory
	} from '@/api/defaultApi.js'

	const emit = defineEmits(['acceptColumn'])

	const current = ref({})

	// 栏目
	const columnList = ref([])
	const columnIndex = ref(0)

	// 类别
	const classList = ref([])
	const classIndex = ref(-1)

	// 分类
	const categoryList = ref([])
	const categoryIndex = ref(-1)

	// 种类
	const typeList = ref([])
	const typeIndex = ref(-1)

	// 滑动指示图片存在的时间（S）
	const slideImgTime = ref(6)
	const slideTimer = ref(null)


	watch(current, (newVal, oldVal) => {
		emit('acceptColumn', newVal)
	})


	//获取栏目
	const getColumnList = async () => {
		let res = await apiGetModelCategory()
		// 栏目列表
		columnList.value = res.data
		// 当前选择的分类
		if (columnIndex.value < 0) return
		current.value = columnList.value[columnIndex.value]

		getClassList()
	}

	//获取类别
	const getClassList = async () => {
		let res = await apiGetModelCategory({
			id: current.value.id
		})
		// 类别列表
		classList.value = res.data
		// 当前选择的分类
		if (classIndex.value < 0) return
		current.value = classList.value[classIndex.value]

		getCategoryList()
	}

	//获取分类
	const getCategoryList = async () => {
		let res = await apiGetModelCategory({
			id: current.value.id
		})
		// 分类列表
		categoryList.value = res.data
		if (categoryList.value.length > 3) {
			// 倒计时隐藏
			downSilderImgTime()
		}
		// 当前选择的分类
		if (categoryIndex.value < 0) return
		current.value = categoryList.value[categoryIndex.value]


		getTypeList()
	}


	//获取种类
	const getTypeList = async () => {
		let res = await apiGetModelCategory({
			id: current.value.id
		})
		// 种类列表
		typeList.value = res.data
		
		// 当前选择的种类
		if (typeIndex.value < 0) return
		current.value = typeList.value[typeIndex.value]
	}

	// 滑动指示图倒计时
	const downSilderImgTime = () => {
		slideTimer.value = setInterval(()=>{
			if(slideImgTime.value == 0){
				clearInterval(slideTimer.value)
				return
			}
			slideImgTime.value --
		},1000)
	}

	//接受选择的栏目
	const acceptColumn = (data) => {
		columnIndex.value = data.index
		current.value = data.data

		categoryList.value = []
		typeList.value = []

		classIndex.value = -1
		categoryIndex.value = -1
		typeIndex.value = -1

		getClassList()
	}

	//接受选择的类别
	const acceptClass = (data) => {
		classIndex.value = data.index
		current.value = data.data

		typeList.value = []

		categoryIndex.value = -1
		typeIndex.value = -1

		getCategoryList()
	}

	//接受选择的分类
	const acceptCategory = (data) => {
		categoryIndex.value = data.index
		current.value = data.data

		typeIndex.value = -1

		getTypeList()
	}

	//接受选择的种类
	const acceptType = (data) => {
		typeIndex.value = data.index
		current.value = data.data
	}


	getColumnList()
</script>

<style lang="scss" scoped>
	.Column {
		width: 100%;
		margin: 0 auto 20rpx;
		background: #000;
		position: relative;

		.container {
			width: 100%;
			background: #191919;
			border-radius: 20rpx;
			padding: 24rpx 24rpx 8rpx;
			box-sizing: border-box;

			.images {
				width: 175rpx;
				height: 70rpx;
				position: absolute;
				right: 24rpx;
				top: 130rpx;

				.column-slide {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>